<template>
  <div style="background-color: #f5f7fb; padding: 20px">
    <el-row :gutter="40">
      <el-col :span="14">
        <div
          style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          "
        >
          <div class="TimeBox">
            <img
              class="iconleft"
              src="https://img.wilmer.com.cn/admin/2024/3-22/%E6%97%A5%E7%A8%8B%E8%A1%A8.png"
              alt
            />
            <span class="riqi"
              >{{ currentYear }}年 {{ currentMonth }}月{{
                new Date().getDate()
              }}日</span
            >
            <div class="textBox">
              <span>{{ time.hours }}</span>
            </div>
            <img
              style="margin: 0 24px"
              class="jiange"
              src="https://img.wilmer.com.cn/admin/2024/3-22/_.png"
              alt
            />
            <div class="textBox">
              <span>{{ time.minutes }}</span>
            </div>
            <img
              style="margin: 0 24px"
              class="jiange"
              src="https://img.wilmer.com.cn/admin/2024/3-22/_.png"
              alt
            />
            <div class="textBox">
              <span>{{ time.seconds }}</span>
            </div>
          </div>
          <div class="uuperBox">
            <full-calendar
              ref="fullCalendar"
              style="height: 100%"
              :options="calendarOptions"
            ></full-calendar>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="MessageBox">
          <div class="firstLine">
            <span class="left">通知公告</span>
            <!-- <div class="right">
              <span>更多</span>
              <img
                src="https://img.wilmer.com.cn/admin/2024/3-22/path.png"
                alt
              />
            </div> -->
          </div>

          <div
            class="newsBox"
            v-for="(item, index) in NoticeList"
            :key="index"
            @click="ondetails(item)"
          >
            <div class="theme">
              <img
                class="left"
                src="https://img.wilmer.com.cn/admin/2024/4-30/Image.png"
                alt=""
              />
              <div class="right">
                <p class="upper">{{ item.noticeTitle }}</p>
                <p class="down">{{ item.remark }}</p>
              </div>
            </div>
            <div class="details">
              <div class="onMore">
                <span>查看</span>
                <img
                  src="https://img.wilmer.com.cn/admin/2024/3-22/path%20%281%29.png"
                  alt
                />
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="40" style="margin-top: 30px">
      <el-col :span="24">
        <div class="calendar">
          <div class="downBox">
            <div class="firstLine">
              <span class="left">今日日程</span>
              <div class="right">
                <div class="rightItem">
                  <div class="spt"></div>
                  <span>紧急</span>
                </div>
                <div class="rightItem">
                  <div class="spt" style="background: rgb(255, 177, 105)"></div>
                  <span>一般</span>
                </div>
                <div class="rightItem">
                  <div class="spt" style="background: rgb(125, 212, 213)"></div>
                  <span>正常</span>
                </div>
              </div>
            </div>
            <div class="switchBox">
              <img
                src="https://img.wilmer.com.cn/admin/2024/4-30/zuo.png"
                alt=""
                @click="leftSlide()"
              />
              <div class="scroll_wrapper" ref="wrapperCon">
                <div class="contentBox">
                  <div class="box">
                    <div class="title"><span class="left">备课准备</span></div>
                    <div class="line"></div>
                    <div class="substaca">
                      明天需要您上幼儿教育公开课，需要提前备课，并及时准备...
                    </div>
                  </div>
                  <div class="box commonly">
                    <div class="title"><span class="left">备课准备</span></div>
                    <div class="line"></div>
                    <div class="substaca">
                      明天需要您上幼儿教育公开课，需要提前备课，并及时准备...
                    </div>
                  </div>
                  <div class="box normal">
                    <div class="title"><span class="left">备课准备</span></div>
                    <div class="line"></div>
                    <div class="substaca">
                      明天需要您上幼儿教育公开课，需要提前备课，并及时准备...
                    </div>
                  </div>
                  <div class="box normal">
                    <div class="title"><span class="left">备课准备</span></div>
                    <div class="line"></div>
                    <div class="substaca">
                      明天需要您上幼儿教育公开课，需要提前备课，并及时准备...
                    </div>
                  </div>
                  <div class="box normal">
                    <div class="title"><span class="left">备课准备</span></div>
                    <div class="line"></div>
                    <div class="substaca">
                      明天需要您上幼儿教育公开课，需要提前备课，并及时准备...
                    </div>
                  </div>
                  <div class="box">
                    <div class="title"><span class="left">备课准备</span></div>
                    <div class="line"></div>
                    <div class="substaca">
                      明天需要您上幼儿教育公开课，需要提前备课，并及时准备...
                    </div>
                  </div>
                </div>
              </div>
              <img
                src="https://img.wilmer.com.cn/admin/2024/4-30/you.png"
                alt=""
                @click="rightSlide()"
              />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import { listSchedule } from "@/api/userSchedule/schedule";
import { listNotice } from "@/api/system/notice";
import schedule from "@/components/schedule/index.vue";
export default {
  components: {
    schedule,
    FullCalendar,
  },
  data() {
    return {
      calendarApi: null,
      timer: null, // 定时器（方便清除）
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      selectedDate: null,
      time: {
        hours: 0,
        minutes: 0,
        seconds: 0,
      },

      list: [], // 日程数据
      toDayList: [], // 今日日程数据
      NoticeList: [], // 通知公告数据

      calendarOptions: {
        // timeGridPlugin  可显示每日时间段
        height: 500,
        aspectRatio: 1.35, //设置日历单元格宽度与高度的比例。
        handleWindowResize: true, //是否随浏览器窗口大小变化而自动变化。
        plugins: [dayGridPlugin, interactionPlugin],
        headerToolbar: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,dayGridWeek,dayGrid",
          // right: 'agendaWeek,dayGridWeek,dayGrid'
        },
        buttonText: {
          // 设置按钮
          today: "今天",
          month: "月",
          week: "周",
          dayGrid: "天",
        },
        // allDaySlot: false,
        editable: true,
        selectable: true,
        navLinks: true,
        // displayEventEnd: true,//所有视图显示结束时间
        initialView: "dayGridMonth", // 设置默认显示月，可选周、日
        dateClick: this.handleDateClick,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents,
        select: this.handleDateSelect,
        // timezone
        // 设置日程
        events: [],
        eventColor: "#f08f00", // 修改日程背景色
        locale: "zh-cn", // 设置语言
        weekNumberCalculation: "ISO", // 周数
        customButtons: {
          prev: {
            text: "PREV",
            click: () => {
              this.prev();
            },
          },
          next: {
            text: "PREV",
            click: () => {
              this.next();
            },
          },
          today: {
            text: "今天",
            click: () => {
              this.today();
            },
          },
        },
      },
      subList: [],
    };
  },
  mounted() {
    this.calendarApi = this.$refs.fullCalendar.getApi();
  },
  created() {
    this.getlist();
    this.getSchedule();
    this.updateTime();
    setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  methods: {
    // 赋值方法
    getReservationList(arrayData) {
      let newArr = [];
      this.subList = arrayData;
      arrayData.forEach((item) => {
        if (item.scheduleLevel == "1") {
          // 紧急
          newArr.push({
            title: item.nickName, // 事件内容
            start: item.scheduleStart.substring(0, 10), // 事件开始时间
            end: item.scheduleEnd.substring(0, 10), // 事件结束时间
            id: item.scheduleId,
            color: "rgb(255, 129, 129)",
          });
        } else if (item.scheduleLevel == "2") {
          // 重要
          newArr.push({
            title: item.nickName, // 事件内容
            start: item.scheduleStart.substring(0, 10), // 事件开始时间
            end: item.scheduleEnd.substring(0, 10), // 事件结束时间
            id: item.scheduleId,
            color: "rgb(255, 177, 105)",
          });
        } else {
          // 次要
          newArr.push({
            title: item.nickName, // 事件内容
            start: item.scheduleStart.substring(0, 10), // 事件开始时间
            end: item.scheduleEnd.substring(0, 10), // 事件结束时间
            id: item.scheduleId,
            color: "rgb(125, 212, 213)",
          });
        }
      });
      this.calendarOptions.events = newArr;
    },
    // 点击某一天日期数字，切换至显示当前所有日程的事件
    handleEvents(events) {
      console.log(events, "事件3");
    },
    // 点击某一日程的事件
    handleEventClick(calEvent) {
      console.log(calEvent, "事件2");
      this.dialogVisible = true; // 显示dialog弹窗
      let id = calEvent.event.id; // 获取当前点击日程的ID
      let info = this.subList.filter((item) => {
        return item.id == id; // 通过ID进行数据匹配
      });
      this.$nextTick(() => {
        this.form = _.cloneDeep(info[0]); // 数据通过深拷贝赋值到form表单用于编辑
        this.getShowTime(this.form.beginDate, this.form.endDate); // 处理时间回显格式
        console.log(info[0], "数据");
      });
    },
    // 加点击某一天区域的事件
    handleDateClick: function (arg) {
      this.$forceUpdate();
      console.log(arg, "事件1");
    },
    prev() {
      this.calendarApi.prev();
    },
    // 切换下一个按钮事件
    next() {
      this.calendarApi.next();
    },
    // 点击今天按钮
    today() {
      this.calendarApi.today();
    },
    ondetails(item) {
      this.$router.push({
        path: "/teacherHome/noticeDetails",
        query: { courseId: item.noticeId },
      });
    },
    getlist() {
      listNotice().then((res) => {
        console.log(res);
        this.NoticeList = res.rows;
      });
    },
    getSchedule() {
      listSchedule().then((res) => {
        this.list = res.rows;
        this.getReservationList(this.list);
      });
    },
    updateTime() {
      const date = new Date();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();
      this.time = {
        hours,
        minutes,
        seconds,
      };
    },
    // 左箭头
    leftSlide() {
      // 保存滚动盒子左侧已滚动的距离
      let left = this.$refs.wrapperCon.scrollLeft;
      let num = 0;
      clearInterval(this.timer);
      this.timer = null;
      this.timer = setInterval(() => {
        //   !left:已经滚动到最左侧
        //   一次性滚动距离（可调节）
        if (!left || num >= 300) {
          // 停止滚动
          clearInterval(this.timer);
          this.timer = null;
          return;
        }
        // 给滚动盒子元素赋值向左滚动距离
        this.$refs.wrapperCon.scrollLeft = left -= 30;
        // 保存向左滚动距离（方便判断一次性滚动多少距离）
        num += 30;
      }, 20);
      // 20：速度（可调节）
    },
    // 右箭头
    rightSlide() {
      // 保存滚动盒子左侧已滚动的距离
      let left = this.$refs.wrapperCon.scrollLeft;
      // 保存元素的整体宽度
      let scrollWidth = this.$refs.wrapperCon.scrollWidth;
      // 保存元素的可见宽度
      let clientWidth = this.$refs.wrapperCon.clientWidth;
      let num = 0;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        // 已经滚动距离+可见宽度
        // left+clientWidth>=scrollWidth：滚动到最右侧
        // num>=300一次性滚动距离
        if (left + clientWidth >= scrollWidth || num >= 300) {
          clearInterval(this.timer);
          return;
        }
        // 给滚动盒子元素赋值向左滚动距离
        this.$refs.wrapperCon.scrollLeft = left += 30;
        // 保存向左滚动距离（方便判断一次性滚动多少距离）
        num += 30;
      }, 20);
      // 20：速度（可调节）
    },

    // 选择月份
    changeMonth(start, end, current) {
      console.log(
        "changeMonth",
        start.format(),
        end.format(),
        current.format()
      );
    },
    // 点击事件
    eventClick(event, jsEvent, pos) {
      console.log("eventClick", event, jsEvent, pos);
    },
    // 点击当天
    dayClick(day, jsEvent) {
      console.log("dayClick", day, jsEvent);
    },
    // 查看更多
    moreClick(day, events, jsEvent) {
      console.log("moreCLick", day, events, jsEvent);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .fc-theme-standard td,
::v-deep .fc-theme-standard th,
::v-deep .fc-theme-standard .fc-scrollgrid {
  border: none !important;
}
::v-deep .fc .fc-daygrid-day-top {
  justify-content: center;
}
::v-deep .fc .fc-daygrid-day.fc-day-today {
  background-color: rgb(0 0 0 / 0%);
}

p {
  margin: 0;
}

.TimeBox {
  width: 100%;
  height: 113px;
  border-radius: 14px;
  background: url("https://img.wilmer.com.cn/admin/2024/3-22/Rectangle%2041.png")
    no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;

  .iconleft {
    width: 58px;
    height: 58px;
    margin-left: 34px;
  }
  .riqi {
    line-height: 1.4;
    margin-left: 47px;
    margin-right: 80px;
    font-size: 48px;
    font-weight: 500;
    color: rgb(51, 51, 51);
  }
  .jiange {
    width: 7px;
  }
  .textBox {
    width: 76px;
    height: 76px;
    background: url("https://img.wilmer.com.cn/admin/2024/3-22/WechatIMG119.jpg")
      no-repeat;
    background-size: 100% 100%;

    display: flex;
    justify-content: center;
    align-content: center;

    span {
      color: rgb(51, 51, 51);
      line-height: 1.4;
      font-weight: 500;
      font-size: 48px;
      font-family: PingFang SC;
    }
  }
}

.uuperBox {
  // height: 520px;
  margin-top: 30px;
  border-radius: 28px;
  background: rgb(255, 255, 255);
  padding: 32px 48px 30px;
  box-sizing: border-box;
}

.MessageBox {
  border-radius: 10px;
  width: 100%;
  height: 700px;
  background-color: #fff;

  .firstLine {
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .left {
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: 700;
      line-height: 140%;
      margin-left: 37px;
      color: rgb(45, 55, 72);
      margin-left: 44px;
    }

    .right {
      margin-right: 44px;
      display: flex;
      align-items: center;
      span {
        font-size: 16px;
        color: rgb(3, 3, 3);
        font-weight: 400;
        font-family: PingFang SC;
        line-height: 1.4;
      }

      img {
        width: 6px;
        height: 10px;
        margin-left: 6px;
      }
    }
  }

  .newsBox {
    cursor: pointer;
    margin-top: 22px;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .theme {
      margin-left: 40px;
      display: flex;
      align-items: center;

      .left {
        width: 50px;
        height: 50px;
        margin-right: 15px;
      }

      .right {
        display: flex;
        flex-direction: column;

        .upper {
          color: rgb(45, 55, 72);
          font-family: PingFang SC;
          font-size: 16px;
          font-weight: 700;
          line-height: 140%;
          letter-spacing: 0%;
        }

        .down {
          color: rgb(153, 153, 153);
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 400;
          line-height: 140%;
          letter-spacing: 0%;
        }
      }
    }

    .details {
      margin-right: 40px;
      display: flex;
      align-items: center;

      .onMore {
        display: flex;
        align-items: center;

        span {
          font-weight: 400;
          font-size: 16px;
          line-height: 1.5;
          font-family: PingFang SC;
          color: rgb(153, 153, 153);
        }

        img {
          width: 6px;
          height: 10px;
          margin-left: 7px;
        }
      }
    }
  }
}

.Box {
  width: 100%;
  height: 113px;
  border-radius: 15px;
  box-shadow: 0px 2px 5.5px 0px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(21px);
  background: linear-gradient(
    136.78deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.8) 109.056%
  );
  display: flex;
  align-items: center;

  .leftImg {
    width: 48px;
    height: 48px;
    margin-left: 37px;
  }

  .time {
    margin-left: 50px;
    display: flex;
    align-items: center;

    .lump {
      width: 76px;
      height: 76px;
      border-radius: 10px;
      background: rgb(255, 255, 255);
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: rgb(112, 112, 112);
        font-family: PingFang SC;
        font-size: 48px;
        font-weight: 700;
        line-height: 140%;
        letter-spacing: 0%;
      }
    }

    img {
      width: 7px;
      height: 33px;
      margin: 0 23px;
    }
  }

  .horn {
    width: 42px;
    height: 33px;
    margin-left: 43px;
  }

  .newsBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .theme {
      margin-left: 54px;
      display: flex;
      align-items: center;

      .left {
        width: 50px;
        height: 50px;
        margin-right: 15px;
      }

      .right {
        display: flex;
        flex-direction: column;

        .upper {
          color: rgb(45, 55, 72);
          font-family: PingFang SC;
          font-size: 16px;
          font-weight: 700;
          line-height: 140%;
          letter-spacing: 0%;
        }

        .down {
          color: rgb(153, 153, 153);
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 400;
          line-height: 140%;
          letter-spacing: 0%;
        }
      }
    }

    .details {
      margin-right: 20px;
      display: flex;
      align-items: center;

      .dateBox {
        color: rgb(153, 153, 153);
        font-family: 思源黑体;
        font-size: 16px;
        font-weight: 400;
        line-height: 23px;
        letter-spacing: 0px;
        margin-right: 26px;
      }

      .onMore {
        display: flex;
        align-items: center;
        color: rgb(255, 177, 105);
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: 400;
        line-height: 150%;

        img {
          width: 6px;
          height: 10px;
          margin-left: 7px;
        }
      }
    }
  }
}

.calendar {
  .downBox {
    padding-bottom: 30px;
    margin-top: 25px;
    border-radius: 28px;
    background: rgb(255, 255, 255);

    .firstLine {
      padding-top: 31px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        color: rgb(45, 55, 72);
        font-family: PingFang SC;
        font-size: 20px;
        font-weight: 700;
        line-height: 140%;
        margin-left: 37px;
      }

      .right {
        margin-right: 83px;
        display: flex;

        .rightItem {
          margin-left: 34px;
          display: flex;
          align-items: center;

          .spt {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: rgb(255, 129, 129);
            margin-right: 7px;
          }

          span {
            color: rgb(45, 55, 72);
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 140%;
          }
        }

        .rightItem:nth-child(1) {
          margin-left: 0;
        }
      }
    }
  }

  .scroll_wrapper {
    max-width: calc(100% - 200px);
    overflow-x: scroll;
    margin-left: 27px;
    margin-right: 27px;
  }

  /*隐藏滚动条*/
  .scroll_wrapper::-webkit-scrollbar {
    display: none;
  }

  .switchBox {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 12px;
      height: 21px;
      cursor: pointer;
    }

    .contentBox {
      margin-top: 20px;
      padding-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .box {
        width: 226px;
        min-width: 226px;
        display: inline-block;
        border-radius: 10px;
        box-shadow: 3px -4px 0px 0px rgba(249, 171, 171, 0.68),
          0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        background: rgb(255, 129, 129);
        box-sizing: border-box;
        padding: 0 16px;
        margin-left: 50px;

        .title {
          display: flex;

          .left {
            color: rgb(255, 255, 255);
            font-family: PingFang SC;
            font-size: 18px;
            font-weight: 500;
            line-height: 140%;
          }
        }

        .line {
          width: 100%;
          border: 1px solid rgb(255, 255, 255);
        }

        .substaca {
          color: rgb(255, 255, 255);
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 140%;
        }
      }

      .box:nth-child(1) {
        margin-left: 0;
      }

      .commonly {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25),
          3px -4px 0px 0px rgba(255, 177, 105, 0.68);
        background: rgb(255, 177, 105);
      }

      .normal {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25),
          3px -4px 0px 0px rgba(125, 212, 213, 0.67);
        background: rgb(125, 212, 213);
      }
    }

    /*隐藏滚动条*/
    .contentBox::-webkit-scrollbar {
      display: none;
    }
  }
}

tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

td {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.isCurrent {
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgb(255, 177, 105) 0%,
    rgb(125, 212, 213) 100%
  );

  span {
    color: #fff;
  }
}

span.selected {
  font-weight: bold;
  color: blue;
}

span.prev-month,
span.next-month {
  color: #ccc;
}
</style>
